<template>

  <div id="graph-chart">
    <div id="main-chart" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "dynamicPoint",
  methods:{
    mounted() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      const data = [
        {
          fixed: true,
          x: myChart.getWidth() / 2,
          y: myChart.getHeight() / 2,
          symbolSize: 20,
          id: '-1'
        }
      ];
      const edges = [];
      option = {
        series: [
          {
            type: 'graph',
            layout: 'force',
            animation: false,
            data: data,
            force: {
              // initLayout: 'circular'
              // gravity: 0
              repulsion: 100,
              edgeLength: 5
            },
            edges: edges
          }
        ]
      };
      setInterval(function () {
        data.push({
          id: data.length + ''
        });
        var source = Math.round((data.length - 1) * Math.random());
        var target = Math.round((data.length - 1) * Math.random());
        if (source !== target) {
          edges.push({
            source: source,
            target: target
          });
        }
        myChart.setOption({
          series: [
            {
              roam: true,
              data: data,
              edges: edges
            }
          ]
        });
        // console.log('nodes: ' + data.length);
        // console.log('links: ' + data.length);
      }, 200);

      option && myChart.setOption(option);
    },
    initChart: function () {
      // 初始化图像
      let myChart = echarts.init(document.getElementById("main-chart"));
      myChart.resize();  //自适应大小
      myChart.setOption(this.setOption());
      // myChart.resize();
      //这里只节选了部分
    },
    setOption: function () {
      let option = {
        title: {
          text: "Graph 简单示例",
        },
        tooltip: {}, //提示框
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        series: [
          {
            type: "graph",
            layout: "force",
            // symbolSize: 50, //倘若该属性不在link里，则其表示节点的大小；否则即为线两端标记的大小
            symbolSize: (value, params) => {
              switch (params.data.category) {
                case 0:
                  return 100;
                  // eslint-disable-next-line no-unreachable
                  break;
                case 1:
                  return 50;
                  // eslint-disable-next-line no-unreachable
                  break;
              }
            },
            roam: true, //鼠标缩放功能
            label: {
              show: true, //是否显示标签
            },
            focusNodeAdjacency: true, //鼠标移到节点上时突出显示结点以及邻节点和边
            edgeSymbol: ["none", "arrow"], //关系两边的展现形式，也即图中线两端的展现形式。arrow为箭头
            edgeSymbolSize: [4, 10],
            draggable: true,
            edgeLabel: {
              fontSize: 20, //关系（也即线）上的标签字体大小
            },
            force: {
              repulsion: 200,
              edgeLength: 120,
            },
            data: [
              {
                name: "节点1",
                category: 0,
              },
              {
                name: "节点2",
                category: 1,
              },
              {
                name: "节点3",
                category: 1,
              },
              {
                name: "节点4",
                category: 1,
              },
            ],
            // links: [],
            links: [
              {
                source: "节点1",
                target: "节点3",
              },
              {
                source: "节点1",
                target: "节点2",
              },
              {
                source: "节点1",
                target: "节点4",
              },
            ],
            lineStyle: {
              opacity: 0.9,
              width: 2,
              curveness: 0,
            },
          },
        ],
      };
      return option;
    },

  },
}
</script>

<style scoped>
#graph-chart {
  height: 100%;
  width: 100%;
}
</style>